import React, { Component } from 'react'

// 演示更新阶段勾子的触发时机
// 1. 当父亲有新的 props 传到子组件的时候会触发更新阶段的 2 个勾子（只要父组件触发了 render 就会执行子组件更新的勾子，不包括挂载的时候）
// 2. setState
// 3. forceUpdate
export default class Child extends Component {
  pRef = React.createRef()
  state = {
    num: 99,
  }
  handleNum = () => {
    this.setState({ num: this.state.num + 1 })
    // this.forceUpdate()
  }
  render() {
    console.log('#1 render')
    return (
      <div>
        <p>Child: {this.props.age}</p>
        <p ref={this.pRef}>{this.state.num}</p>
        <button onClick={this.handleNum}>修改 num</button>
      </div>
    )
  }
  componentDidUpdate() {
    console.log('#2 componentDidUpdate')
    // 例如获取到渲染完成后的 num
    console.log(this.pRef.current.innerHTML)
  }
}
